<script setup>
import { ref, defineAsyncComponent } from 'vue';
import random from '@/utils/random';


const emit = defineEmits(['confirm']);


// 动作列表对话框
const actionListDialog = ref(false);

// 动作对话框是否可见
const actionDialog = ref(false);

// 动作组件名称
const actionComponentName = ref('');

// 动作组件数据
const actionComponentData = ref({
  title: ''
});

// 动作组件列表
const actionComponents = {
  code: defineAsyncComponent(() => import('./ActionEngineType/Code.vue')),
  toQuestion: defineAsyncComponent(() => import('./ActionEngineType/ToQuestion.vue'))
};

// 打开动作对话框
function openActionDialog(type, data = {}) {

  // 没有类型说明是打开动作列表对话框
  if (!type) {
    actionListDialog.value = true;

    return;
  }

  // 关闭动作列表对话框
  actionListDialog.value = false;

  // 设置组件名称
  actionComponentName.value = type;

  if (!data.key) {
    data.key = random.lowerCase();
    data.type = type;
  }

  actionComponentData.value = JSON.parse(JSON.stringify(data));

  // 打开动作对话框
  actionDialog.value = true;
}

// 确认动作对话框
function confirmActionDialog() {
  // 关闭动作对话框
  actionDialog.value = false;

  // 触发事件
  emit('confirm', JSON.parse(JSON.stringify(actionComponentData.value)));
}

// 暴露函数
defineExpose({
  openActionDialog
});

const actionTypeList = [
  {
    title: '应用动作',
    type: 'appAction',
    list: [
      {
        type: 'code',
        title: 'Javascript代码'
      },
      {
        type: 'toQuestion',
        title: '前往指定题目'
      }
    ]
  }
];
</script>

<template>
  <div>
    <el-dialog v-model="actionListDialog" title="请选择下方的执行动作" width="800px">
      <div v-for="actionType in actionTypeList" :key="actionType.type">
        <div class="g-tips mb-2">{{ actionType.title }}</div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="actionItem in actionType.list" :key="actionItem.type" class="mb-2">
            <div class="ac-btn" @click="openActionDialog(actionItem.type)">
              {{ actionItem.title }}
              <span class="g-tips">({{ actionItem.type }})</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog v-model="actionDialog" width="800px" destroy-on-close :show-close="false">
      <div>
        <el-input v-model="actionComponentData.title" placeholder="标题" class="w-100, mb-3">
          <template #prepend>动作名称</template>
        </el-input>
        <component :is="actionComponents[actionComponentName]" v-model="actionComponentData"
          v-if="actionComponentName && actionComponents[actionComponentName]" />
      </div>

      <template #footer>
        <el-button @click="actionDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmActionDialog()">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.ac-btn {
  border: 1px solid var(--border-base-color);
  padding: var(--p-1);
  border-radius: var(--br-2);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: var(--m-1);
}

.ac-btn:hover {
  background-color: var(--primary-text-color);
  border-color: var(--primary-text-color-1);
  color: var(--primary-text-color-1);
}
</style>